<template>
  <div class="w-full">
    <el-tree-select
      ref="treeRef"
      v-model="modelValue"
      :data="list"
      :value-key="props.valueKey"
      :props="{ label: props.labelKey }"
      show-checkbox
      multiple
      check-on-click-node
      @check="handleNodeClick"
      :placeholder="props.placeholder"
      collapse-tags
      :max-collapse-tags="1"
      class="common-tree-wrap"
      popper-class="common-tree-select-wrap"
      clearable
    >
      <template #header>
        <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
          全选
        </el-checkbox>
      </template>
    </el-tree-select>
  </div>
</template>

<script setup>
import { getCommonData } from "@/api/project/common.js";
const modelValue = defineModel();
const dataList = ref([]);
const treeRef = ref();
const props = defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
  placeholder: {
    type: String,
    default: "",
  },
  valueKey: {
    type: String,
    default: "code",
  },
  labelKey: {
    type: String,
    default: "name",
  },
  isFetch: {
    type: Boolean,
    default: true,
  },
  paramsName: String,
});
const checkAll = ref(false);
const indeterminate = ref(false);
const list = computed(() => {
  return props.isFetch ? dataList.value : props.dataList;
});
//获取数据
const getDataList = async () => {
  const params = {
    bizName: props.paramsName,
  };
  try {
    const res = await getCommonData(params);
    dataList.value = res.data;
  } catch (error) {
    console.log(error);
  }
};
//监听选中内容变化
watch(modelValue, (val) => {
  if (val.length === 0) {
    checkAll.value = false;
    indeterminate.value = false;
  } else if (val.length === getAllCounts(list.value)) {
    checkAll.value = true;
    indeterminate.value = false;
  } else {
    indeterminate.value = true;
  }
});
//获取全选时总共的value数量
const getAllCounts = (items) => {
  let count = 0;
  const setCounts = (items) => {
    items.forEach((item) => {
      count++;
      //如果当前项没有子项 添加当前项的value 否则添加所有子项的value
      if (item.children && item.children.length > 0) {
        // 如果当前项有子项，则递归获取子项的id
        setCounts(item.children);
      }
    });
  };
  setCounts(items);
  return count;
};
//全选获取所有值
const getAllIds = (items) => {
  let ids = [];
  items.forEach((item) => {
    ids.push(item[props.valueKey]);
    //如果当前项没有子项 添加当前项的value 否则添加所有子项的value
    if (item.children && item.children.length > 0) {
      // 如果当前项有子项，则递归获取子项的id
      ids = ids.concat(getAllIds(item.children));
    }
  });
  return ids;
};
//点击全选
const handleCheckAll = (val) => {
  indeterminate.value = false;
  if (val) {
    modelValue.value = getAllIds(list.value);
  } else {
    modelValue.value = [];
  }
};
//非全选
const handleNodeClick= (data,node) =>{
  modelValue.value = node.checkedKeys;
}
onMounted(() => {
  props.isFetch && getDataList();
});
</script>

<style lang="scss">
.common-tree-select-wrap {
  .el-select-dropdown__header {
    padding: 2px 10px;
  }
}
// .common-tree-wrap {
//   .el-tree-node {
//     padding: 0 10px;
//   }
//   .el-tree-node__expand-icon {
//     display: none;
//   }
// }
</style>
